import React from 'react'
import { map } from 'lodash'

import SvgIcon from '../common/svg-icon'
import scss from './styles/shortcut.module.scss'

const data = [
  {
    label: '#icondir-left',
    value: '步退',
    svg: true,
  },
  {
    label: '#icondir-right',
    value: '步进',
    svg: true,
  },
  {
    label: '#icondir-top',
    value: '音量+',
    svg: true,
  },
  {
    label: '#icondir-bottom',
    value: '音量-',
    svg: true,
  },
  {
    label: 'Esc',
    value: '退出全屏',
  },
]

const Shortcut = ({ visible }) => {
  return (
    <div style={{ display: visible ? 'block' : 'none' }} className={scss.shortcut}>
      {map(data, ({ label, svg, value }, k) => {
        return (
          <div key={k} className={scss.item} style={{ background: k % 2 === 0 ? '#222222' : '' }}>
            <span style={{ display: svg ? 'none' : 'block' }}>{label}</span>
            <SvgIcon icon={label} style={{ display: svg ? 'block' : 'none' }} marginRight={5} />
            <span>{value}</span>
          </div>
        )
      })}
    </div>
  )
}

export default Shortcut
